<template>
  <div class="checkout-view">
    <div class="page-header">
      <div class="header-content">
        <el-button icon="el-icon-arrow-left" @click="goBack">返回首页</el-button>
        <h2>结算管理</h2>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧商品查询区域 -->
      <div class="product-list-container">
        <div class="search-panel">
          <div class="search-row-container">
            <el-input
              placeholder="搜索商品名称"
              v-model="searchText"
              class="search-input"
              clearable
              @keyup.enter.native="searchProducts"
            >
              <el-button slot="append" icon="el-icon-search" @click="searchProducts"></el-button>
            </el-input>
            
            <el-select 
              v-model="selectedCategory" 
              placeholder="商品分类" 
              clearable 
              @change="searchProducts"
              @focus="loadCategories"
              class="select-input">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            
            <el-select 
              v-model="sortOption" 
              placeholder="排序方式" 
              @change="searchProducts"
              class="select-input">
              <el-option label="价格从低到高" value="priceAsc"></el-option>
              <el-option label="价格从高到低" value="priceDesc"></el-option>
              <el-option label="库存从低到高" value="stockAsc"></el-option>
              <el-option label="库存从高到低" value="stockDesc"></el-option>
            </el-select>
          </div>
        </div>

        <div class="table-container">
          <el-table
            :data="displayProductList"
            border
            style="width: 100%"
            v-loading="loading"
            :resizable="false"
            height="100%"
          >
            <el-table-column prop="code" label="商品编号" width="200" align="center" :resizable="false"></el-table-column>
            <el-table-column prop="name" label="商品名称" width="180" align="center" :resizable="false"></el-table-column>
            <el-table-column prop="category" label="分类" width="160" align="center" :resizable="false"></el-table-column>
            <el-table-column prop="price" label="价格" width="120" align="center" :resizable="false">
              <template slot-scope="scope">
                ¥{{ scope.row.price.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="100" align="center" :resizable="false"></el-table-column>
            <el-table-column label="操作" width="90" align="center" fixed="right" :resizable="false">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  circle
                  @click="addToCart(scope.row)"
                  :disabled="scope.row.stock <= 0"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>

      <!-- 右侧购物车区域 -->
      <div class="cart-container">
        <div class="table-container">
          <el-table
            :data="cartItems"
            border
            style="width: 100%"
            :resizable="false"
            height="100%"
          >
            <el-table-column prop="name" label="商品名称" min-width="120" align="center" :resizable="false"></el-table-column>
            <el-table-column prop="price" label="单价" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                ¥{{ scope.row.price.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="数量" width="160" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.quantity"
                  :min="1"
                  :max="scope.row.originalStock || 999"
                  size="mini"
                  @change="updateTotal"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="小计" width="100" align="center" :resizable="false">
              <template slot-scope="scope">
                ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="70" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="removeFromCart(scope.$index)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="cart-footer">
          <div class="total-amount">
            总计: <span class="amount">¥{{ totalAmount.toFixed(2) }}</span>
          </div>
          <div class="actions">
            <el-button type="danger" @click="clearCart" :disabled="!cartItems.length">清空</el-button>
            <el-button type="primary" @click="submitCheckout" :disabled="!cartItems.length">结算</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付对话框 -->
    <el-dialog
      :visible.sync="paymentDialogVisible"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal="true"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="payment-dialog"
      center
    >
      <div class="payment-content">
        <div class="payment-loading">
          <div v-if="paymentStatus === 'ready'" class="loading-spinner">
            <svg viewBox="25 25 50 50" class="circular">
              <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
            </svg>
          </div>
          <i v-else-if="paymentStatus === 'processing'" class="el-icon-loading" style="font-size: 40px;"></i>
        </div>
        
        <div class="payment-text">
          {{ paymentStatus === 'ready' ? '准备支付中' : '正在处理支付结果' }}
        </div>
        
        <div class="payment-tip" v-if="paymentStatus === 'ready'">
          请使用支付设备扫描条码
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button 
          @click="handleLaterPayment" 
          class="later-btn" 
          :loading="isProcessingPayment"
          :disabled="isProcessingPayment">
          稍后支付
        </el-button>
        <el-button 
          @click="handleManualPayment" 
          type="primary" 
          class="manual-btn" 
          :loading="isProcessingPayment"
          :disabled="isProcessingPayment">
          手动支付
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CheckoutView',
  data() {
    return {
      searchText: '',
      selectedCategory: '',
      sortOption: '',
      loading: false,
      allProducts: [],
      filteredProductList: [],
      cartItems: [],
      totalAmount: 0,
      currentPage: 1,
      pageSize: 10,
      categoryOptions: [],
      categoriesLoaded: false,
      total: 0,
      scanBuffer: '', // 用于存储扫码枪输入的字符
      lastKeyTime: 0,  // 上次按键时间
      maxScanGap: 20,   // 扫码枪按键间隔(毫秒)
      paymentDialogVisible: false, // 支付对话框是否显示
      paymentStatus: 'ready', // 支付状态：ready-准备中, processing-处理中
      payCode: null, // 支付条码
      isPaymentScanning: false, // 是否正在扫描支付条码
      isProcessingPayment: false // 是否正在处理支付请求
    }
  },
  computed: {
    displayProductList() {
      return this.filteredProductList;
    }
  },
  created() {
    // 添加键盘事件监听器，用于捕获扫码枪输入
    window.addEventListener('keydown', this.handleKeyDown);
    // 加载商品数据
    this.loadProducts();
  },
  beforeDestroy() {
    // 移除键盘事件监听器
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    goBack() {
      // 重置所有状态
      this.resetAll();
      // 返回首页
      this.$emit('close');
    },
    
    // 重置所有状态
    resetAll() {
      // 重置搜索条件
      this.searchText = '';
      this.selectedCategory = '';
      this.sortOption = '';
      // 重置分页
      this.currentPage = 1;
      this.pageSize = 10;
      // 清空购物车
      this.cartItems = [];
      this.totalAmount = 0;
      // 重置扫码缓存
      this.scanBuffer = '';
      this.lastKeyTime = 0;
      // 重置支付状态
      this.paymentDialogVisible = false;
      this.paymentStatus = 'ready';
      this.payCode = null;
      this.isPaymentScanning = false;
      this.isProcessingPayment = false; // 重置处理中状态
    },
    
    loadProducts() {
      // 重置所有状态
      this.resetAll();
      // 调用API获取商品列表初始数据
      this.searchProducts();
    },
    
    searchProducts() {
      this.loading = true;
      
      // 构建查询参数
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.searchText || ''
      };
      
      // 如果选择了分类，添加categoryId
      if (this.selectedCategory) {
        // 从分类选项中找到对应的分类对象
        const category = this.categoryOptions.find(c => c.value === this.selectedCategory);
        if (category && category.id) {
          params.categoryId = category.id;
        }
      }
      
      // 添加排序参数
      if (this.sortOption) {
        switch (this.sortOption) {
          case 'priceAsc':
            params.orderBy = 'price';
            params.orderDirection = 'asc';
            break;
          case 'priceDesc':
            params.orderBy = 'price';
            params.orderDirection = 'desc';
            break;
          case 'stockAsc':
            params.orderBy = 'stock';
            params.orderDirection = 'asc';
            break;
          case 'stockDesc':
            params.orderBy = 'stock';
            params.orderDirection = 'desc';
            break;
        }
      }
      
      // 调用API获取分页筛选后的商品列表
      this.$http.get('/product/list', { params })
        .then(response => {
          console.log('获取商品列表成功:', response);
          if (response.data) {
            // 过滤掉status为"locked"的下架商品
            const records = response.data.records || [];
            this.filteredProductList = records.filter(product => product.status !== 'locked');
            this.total = response.data.total || 0;
            
            // 如果有下架商品被过滤，调整total值
            if (records.length > this.filteredProductList.length) {
              this.total -= (records.length - this.filteredProductList.length);
            }
          } else {
            this.filteredProductList = [];
            this.total = 0;
          }
          this.loading = false;
        })
        .catch(error => {
          console.error('获取商品列表失败:', error);
          this.$message.error('获取商品列表失败');
          this.filteredProductList = [];
          this.total = 0;
          this.loading = false;
        });
    },
    
    handleSizeChange(size) {
      this.pageSize = size;
      this.searchProducts();
    },
    
    handleCurrentChange(page) {
      this.currentPage = page;
      this.searchProducts();
    },
    
    addToCart(product) {
      // 检查商品是否已在购物车中
      const existingItem = this.cartItems.find(item => item.id === product.id);
      
      if (existingItem) {
        // 如果商品已在购物车中，增加数量
        existingItem.quantity++;
      } else {
        // 检查库存是否充足
        if (product.stock <= 0) {
          return;
        }
        
        // 添加商品到购物车
        const cartItem = {
          id: product.id,
          name: product.name,
          code: product.code || '',
          categoryId: product.categoryId || '',
          price: product.price,
          originalStock: product.stock,
          quantity: 1,
          version: product.version, // 保存version字段
          isNew: true  // 标记是新添加的商品
        };
        
        this.cartItems.push(cartItem);
        
        // 滚动到底部并应用高亮动画
        this.$nextTick(() => {
          const cartTable = this.$el.querySelector('.cart-container .el-table__body-wrapper');
          if (cartTable) {
            cartTable.scrollTop = cartTable.scrollHeight;
            
            // 获取最后一行并添加高亮类
            const rows = cartTable.querySelectorAll('.el-table__row');
            if (rows.length > 0) {
              const lastRow = rows[rows.length - 1];
              lastRow.classList.add('highlight-item');
              
              // 2秒后移除新添加标记
              setTimeout(() => {
                if (this.cartItems.length > 0) {
                  const lastItem = this.cartItems[this.cartItems.length - 1];
                  if (lastItem) {
                    lastItem.isNew = false;
                  }
                }
              }, 2000);
            }
          }
        });
      }
      
      // 更新总金额
      this.updateTotal();
    },
    
    removeFromCart(index) {
      // 直接移除商品，不使用变量
      this.cartItems.splice(index, 1);
      // 更新总金额
      this.updateTotal();
    },
    
    clearCart() {
      this.$confirm('确定要清空购物车吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cartItems = [];
        this.totalAmount = 0;
        this.$message({
          type: 'success',
          message: '购物车已清空'
        });
      }).catch(() => {});
    },
    
    updateTotal() {
      this.totalAmount = this.cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    },
    
    submitCheckout() {
      // 确保购物车中有商品
      if (this.cartItems.length === 0) {
        this.$message.warning('请先添加商品到结算列表');
        return;
      }
      
      // 显示支付对话框
      this.paymentStatus = 'ready';
      this.payCode = null;
      this.isPaymentScanning = true; // 开始扫描支付条码
      this.paymentDialogVisible = true;
    },
    
    // 处理稍后支付
    handleLaterPayment() {
      // 准备提交数据，payCode为null
      this.submitPaymentData(null);
    },
    
    // 处理手动支付
    handleManualPayment() {
      // 设置支付码为"pay success"
      this.submitPaymentData("pay success");
    },
    
    // 提交支付数据
    submitPaymentData(payCode) {
      // 设置处理中状态，防止重复点击
      this.isProcessingPayment = true;
      
      // 更新状态
      if (payCode) {
        this.paymentStatus = 'processing';
      }
      
      // 准备提交数据
      const productList = this.cartItems.map(item => ({
        id: item.id,
        name: item.name,
        stock: item.quantity,
        code: item.code || '',
        categoryId: item.categoryId || '',
        price: item.price.toString(),
        status: 'active',
        number: item.quantity,
        version: item.version // 添加version字段
      }));
      
      // 构建请求数据
      const requestData = {
        payCode: payCode,
        productList: productList
      };
      
      console.log('准备提交结算数据:', requestData);
      
      // 调用真实API
      this.$http.post('/orders/saveBatch', requestData)
        .then(response => {
          console.log('结算操作返回结果:', response);
          
          // 关闭支付对话框
          this.paymentDialogVisible = false;
          
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: payCode ? '支付成功!' : '订单已保存，稍后支付!'
            });
            
            // 重置所有状态
            this.resetAll();
            
            // 通知父组件刷新商品列表
            this.$emit('refresh-products');
            
            // 触发订单列表刷新事件
            this.$root.$emit('checkout-completed');
            
            // 返回首页
            this.$emit('close');
          } else {
            this.$message.error(response.message || '结算操作失败');
          }
        })
        .catch(error => {
          console.error('结算操作失败:', error);
          this.$message.error('结算操作失败，请稍后重试');
          
          // 关闭支付对话框
          this.paymentDialogVisible = false;
        })
        .finally(() => {
          // 无论成功失败都重置处理状态
          this.isProcessingPayment = false;
        });
    },
    
    loadCategories() {
      // 如果分类已经加载过，则不再重复加载
      if (this.categoriesLoaded) {
        return;
      }
      
      this.$http.get('/category/getAllCategory').then(response => {
        console.log('获取分类列表成功:', response);
        if (response.data && Array.isArray(response.data)) {
          // 将返回的categoryVO列表转换为下拉框选项格式
          this.categoryOptions = response.data.map(category => {
            return {
              id: category.id, // 保存id用于查询
              value: category.name,
              label: category.name
            };
          });
          this.categoriesLoaded = true;
        }
      }).catch((error) => {
        console.error('获取分类列表失败:', error);
        this.$message.error('获取分类列表失败');
      });
    },
    
    // 处理键盘输入，用于捕获扫码枪数据
    handleKeyDown(event) {
      // 如果用户正在输入框中输入或者页面中有激活的输入元素，不处理扫码
      if (event.target.tagName === 'INPUT' || 
          event.target.tagName === 'TEXTAREA' || 
          event.target.isContentEditable ||
          document.activeElement.tagName === 'INPUT' ||
          document.activeElement.tagName === 'TEXTAREA' ||
          event.target.className.includes('el-input') ||
          event.target.closest('.el-input') ||
          event.target.closest('.search-panel') ||
          event.target.closest('.pagination-container')) {
        return;
      }
      
      const currentTime = new Date().getTime();
      
      // 如果按键间隔大于扫码枪最大间隔，则认为是新的扫码开始
      if (currentTime - this.lastKeyTime > this.maxScanGap) {
        this.scanBuffer = '';
      }
      
      // 更新上次按键时间
      this.lastKeyTime = currentTime;
      
      // 如果按下的是回车键，认为扫码结束，处理扫码数据
      if (event.keyCode === 13) {
        // 判断是否正在支付扫码状态
        if (this.isPaymentScanning && this.paymentDialogVisible) {
          this.handlePaymentCode(this.scanBuffer);
        } else {
          this.processScannedCode(this.scanBuffer);
        }
        
        this.scanBuffer = '';
        event.preventDefault(); // 阻止回车默认行为
        return;
      }
      
      // 将按键字符添加到缓冲区
      if (event.key && event.key.length === 1) {
        this.scanBuffer += event.key;
      }
    },
    
    // 处理支付条码
    handlePaymentCode(code) {
      if (!code) return;
      
      console.log('扫描到支付条码:', code);
      this.payCode = code;
      this.paymentStatus = 'processing';
      
      // 提交支付数据
      this.submitPaymentData(code);
    },
    
    // 处理扫描到的商品编号
    processScannedCode(code) {
      if (!code) return;
      
      console.log('扫描到商品编号:', code);
      
      // 在当前显示的商品列表中查找匹配的商品
      const matchedProduct = this.displayProductList.find(product => product.code === code);
      
      if (matchedProduct) {
        // 检查库存是否充足
        if (matchedProduct.stock <= 0) {
          this.$message.warning('商品库存不足');
          return;
        }
        
        // 直接添加到购物车（addToCart方法会处理数量累加）
        this.addToCart(matchedProduct);
        
        // 高亮显示匹配的商品行
        this.$nextTick(() => {
          const table = this.$el.querySelector('.product-list-container .el-table__body-wrapper');
          if (table) {
            const rows = table.querySelectorAll('.el-table__row');
            rows.forEach((row, index) => {
              if (this.displayProductList[index].id === matchedProduct.id) {
                row.classList.add('scan-highlight');
                setTimeout(() => {
                  row.classList.remove('scan-highlight');
                }, 2000);
              }
            });
          }
        });
      } else {
        // 如果当前页面没有找到，可能需要从所有产品中搜索
        // 设置搜索文本为扫描到的编号，并触发搜索
        this.searchText = code;
        this.searchProducts();
      }
    }
  }
}
</script>

<style scoped>
.checkout-view {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-header {
  background-color: #ff6b00;
  padding: 0;
  color: white;
  width: 100%;
  z-index: 10;
  margin: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.header-content {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.page-header h2 {
  margin-left: 20px;
  margin-bottom: 0;
  color: white;
}

.page-header .el-button {
  background-color: transparent;
  border-color: white;
  color: white;
}

.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 10px 20px 20px;
  height: calc(100% - 50px);
  overflow: hidden;
  min-height: 600px;
}

.product-list-container {
  flex: 1.8;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  height: 100%;
}

.search-panel {
  margin-bottom: 15px;
}

.search-row-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
}

.search-input {
  width: 40%;
  min-width: 180px;
}

.select-input {
  width: 30%;
  min-width: 120px;
}

.table-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  height: calc(100% - 80px);
  min-height: 300px;
}

.pagination-container {
  margin-top: 10px;
}

.cart-container {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  height: 100%;
  min-width: 500px;
}

.cart-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-amount {
  font-size: 16px;
}

.total-amount .amount {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b00;
}

.actions {
  display: flex;
  gap: 10px;
}

.el-table {
  width: 100% !important;
  table-layout: fixed;
}

.el-table__body {
  width: 100% !important;
}

/* 禁用表格列宽调整 */
.el-table .el-table__column-resize-proxy {
  display: none !important;
}

.el-table colgroup col {
  width: auto !important;
}

/* 添加扫码成功高亮样式 */
.scan-highlight {
  background-color: rgba(255, 107, 0, 0.2) !important;
  animation: fade-highlight 2s;
}

@keyframes fade-highlight {
  0% { background-color: rgba(255, 107, 0, 0.5); }
  100% { background-color: rgba(255, 107, 0, 0); }
}

/* 购物车新增商品高亮 */
.highlight-item {
  background-color: rgba(103, 194, 58, 0.1);
  animation: fade-add 2s;
}

@keyframes fade-add {
  0% { background-color: rgba(103, 194, 58, 0.3); }
  100% { background-color: transparent; }
}

.cart-footer .el-button--primary {
  background-color: #ff6b00;
  border-color: #ff6b00;
}

.el-table__row .el-button--primary {
  background-color: #ff6b00;
  border-color: #ff6b00;  
}

.payment-dialog {
  border-radius: 20px !important;
  overflow: hidden;
}

/* 增强el-dialog组件内部元素的圆角设计 */
.payment-dialog /deep/ .el-dialog {
  border-radius: 20px !important;
  overflow: hidden;
}

.payment-dialog /deep/ .el-dialog__header {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.payment-dialog /deep/ .el-dialog__body {
  padding: 30px 20px;
}

.payment-dialog /deep/ .el-dialog__footer {
  padding-top: 0;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 修改Element UI默认遮罩层样式 */
.payment-dialog /deep/ .v-modal {
  opacity: 0.6;
  background-color: #000;
}

/* 确保对话框始终在最上层 */
.el-dialog__wrapper {
  z-index: 3000 !important;
}

.payment-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.payment-loading {
  margin-bottom: 20px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b00;
}

.loading-spinner {
  width: 80px;
  height: 80px;
  position: relative;
}

.circular {
  height: 80px;
  width: 80px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 4;
  stroke: #ff6b00;
  stroke-linecap: round;
  animation: loading-dash 1.5s ease-in-out infinite;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

.payment-text {
  font-size: 20px;
  font-weight: bold;
  color: #304156;
  margin-bottom: 10px;
}

.payment-tip {
  font-size: 14px;
  color: #909399;
  margin-top: 10px;
}

.dialog-footer {
  text-align: center;
  margin-top: 20px;
}

.later-btn {
  width: 120px;
  height: 40px;
  background-color: #fff;
  color: #ff6b00;
  border-color: #ff6b00;
  font-weight: 500;
}

.later-btn:hover {
  background-color: #fff5ef;
  color: #ff6b00;
  border-color: #ff6b00;
}

.manual-btn {
  width: 120px;
  height: 40px;
  margin-left: 15px;
  background-color: #ff6b00;
  border-color: #ff6b00;
  font-weight: 500;
}

.manual-btn:hover {
  background-color: #e76100;
  border-color: #e76100;
}
</style>